<template>
    <div class="page">
      <h2>修改密码</h2>
      <!-- <p>账号：{{ username }}</p> -->
      <form @submit.prevent="handleResetPassword">
        <div class="input-group">
          <label for="password">当前密码:</label>
          <input
            type="password"
            id="password"
            v-model="password"
            placeholder="请输入当前账号密码"
            title="请输入当前账号密码"
            required
          />
        </div>
        <div class="input-group">
          <label for="confirm-password">新密码:</label>
          <input
            type="password"
            id="confirm-password"
            v-model="confirmPassword"
            placeholder="新密码和当前密码不能相同"
            title="新密码和当前密码不能相同"
            required
          />
        </div>
        <div class="input-group">
          <label for="confirm-password">确认密码:</label>
          <input
            type="password"
            id="confirm-password"
            v-model="confirmPassword"
            placeholder="确认密码和新密码保持一致"
            title="确认密码和新密码保持一致"
            required
          />
        </div>
        <button type="submit" class="forgot-password-button">提交</button>
      </form>
      <div class="links">
        <a href="#" @click.prevent="$emit('toggleForm', 'login')">返回登录</a>
      </div>
    </div>
  </template>
  
  <script>
  export default {
    props: {
      username: {
        type: String,
        default: '',
      },
    },
    data() {
      return {
        password: '',
        confirmPassword: '',
      };
    },
    methods: {
      handleResetPassword() {
        // 检查密码和确认密码是否一致
        if (this.password !== this.confirmPassword) {
          alert('密码和确认密码不一致，请重新输入');
          return;
        }
  
        // 检查密码格式是否符合要求
        const passwordPattern = /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{6,16}$/;
        if (!passwordPattern.test(this.password)) {
          alert('密码格式不正确，请输入6到16位字母和数字的组合');
          return;
        }
  
        // 如果密码一致且格式正确，通知父组件切换到登录页面
        this.$emit('toggleForm', 'login');
      },
    },
  };
  </script>